<template>
<div>
    <Phead />
  <div class="bidding clearfix">
        <div class="bidding-top2 clearfix"></div>
        <div class="w">
            <div class="haocai">
                <h2>{{bid_name}}</h2>
                <ul class="clearfix">
                    <li>
                        <img src="@/assets/img/haocai1.png" alt="">
                        <div class="right">
                            <p>金额</p>
                            <span>{{title_price}}</span>
                        </div>
                    </li>
                    <li>
                        <img src="@/assets/img/haocai2.png" alt="">
                        <div class="right">
                            <p>已完成</p>
                            <span>{{title_num}}</span>
                        </div>
                    </li>
                    <li>
                        <img src="@/assets/img/haocai3.png" alt="">
                        <div class="right">
                            <p>进行中</p>
                            <span>{{title_date}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 招标中导航 -->
        <div class="w haocailist">
            <div class="bidding-list">
                <ul>
                    <ul>
                        <li :class="tab == 20?'active':''" @click="tabChange" data-tab="20">招标中</li>
                        <li :class="tab == 70?'active':''" @click="tabChange" data-tab="70">已成交</li>
                        <li :class="tab == 100?'active':''" @click="tabChange" data-tab="100">已报名</li>
                    </ul>
                </ul>
                <router-link to="/bid/pushbid" >
                 <button class="quick">快速招标</button>
               </router-link>
                <!-- <div class="search">
                    <input type="text" placeholder="请输入您要搜索的项目关键字">
                    <button>搜索</button>
                    <img src="@/assets/img/search.png" alt="">
                </div> -->
            </div>
            <div class="content">
                <!-- 招标中内容 -->
                <ul class="ul1 stamp" v-if="tab == 20">
                  <li  v-for="(val,index) in bidBeing">
                      <div  :data-bidid="val.bid_id" @click="toDetail">
                          <span>({{val.bid_type}})</span>
                          <em>{{val.bid_name}}</em>

                          <button @click.stop="enrollBid" :data-bidid="val.bid_id" :data-id="index" v-if="!val.is_enlist" type="button" class="btn">
                            立即报名
                          </button>
                          <button type="button" class="whitebtn" v-else>
                            已报名
                          </button>

                          <i class="fr">
                          <em></em>{{val.city_id}}</i>
                          <h4>
                            {{val.bid_remark}}
                          </h4>

                          <tbody>
                              <table>
                                  <tr>
                                      <td class="green">
                                        {{val.countDown}}
                                        
                                      </td>
                                      <td><em>{{val.bid_user_company}}</em></td>
                                      <td><em>{{val.bid_enlist_num}}人</em></td>
                                      <td><em>{{val.time}}</em></td>
                                  </tr>
                                  <tr>
                                      <td>报名倒计时</td>
                                      <td>发布者</td>
                                      <td>竞标</td>
                                      <td>日期</td>
                                  </tr>
                              </table>
                          </tbody>
                      </div>
                  </li>
                  
              </ul>
              <!-- 已成交内容 -->
              <ul class="ul2" v-if="tab == 70">
                  <li  v-for="(val,index) in bidDone">
                      <a href="#" :data-bidid="val.bid_id" @click="toDetail">
                          <span>({{val.bid_type}})</span>
                          <em>{{val.bid_name}}</em>

                          <i class="fr">
                          <em></em>{{val.city_id}}</i>
                          <h4>
                            {{val.bid_remark}}
                          </h4>
                          <tbody>
                              <table>
                                  <tr>
                                      <td class="green"><span>￥{{val.pick_price}}</span></td>
                                      <td><em>{{val.bid_user_company}}</em></td>
                                      <td><em>{{val.time}}</em></td>
                                      <td><em>{{val.bid_enlist_num}}人</em></td>
                                  </tr>
                                  <tr>
                                      <td>完成价格</td>
                                      <td>发布者</td>
                                      <td>日期</td>
                                      <td>竞标</td>
                                  </tr>
                              </table>
                          </tbody>
                      </a>
                  </li>
                  
              </ul>
              <!-- 以报名内容 -->
              <ul class="ul3" v-if="tab == 100">
                  <li   v-for="(val,index) in bidColl">
                      <a href="#" :data-bidid="val.bid_id" @click="toDetail">
                          <span>({{val.bid_type}})</span>
                          <em>{{val.bid_name}}</em>

                          <button class="whitebtn">已报名</button>
                          <i class="fr">
                          <em></em>{{val.city_id}}</i>
                          <h4>
                            {{val.bid_remark}}
                          </h4>
                          <tbody>
                              <table>
                                  <tr>
                                      <td class="green"><span>{{val.bid_start_time}}</span></td>

                                      <td><em>{{val.bid_user_company}}</em></td>

                                      <td><em>{{val.bid_enlist_num}}人</em></td>
                                  </tr>
                                  <tr>
                                      <td>开始时间</td>
                                      <td>发布者</td>

                                      <td>竞标</td>
                                  </tr>
                              </table>
                          </tbody>
                      </a>
                  </li>
              </ul>    
            </div>

            <p class="more" @click="onPullingUp">
                 点我加载更多
            </p>
        </div>


    </div>
  

    <Pfoot />

    <!-- 弹窗 -->
    <Pdailog :is-show="dailogShow" @on-close="closeDialog" >
         <div slot="main">{{dailogText}}</div>
    </Pdailog>


  </div>
  </template>

<script>
import Phead from '@/components/Phead.vue'
import Pfoot from '@/components/Pfoot.vue'
import Pdailog from '@/components/Pdailog.vue'

export default {
  data(){
    return{
        tab:20,//tab 20 招标中 70已完成，100 已收藏
        tabIndex: 1,
        bidtype:0, //单品类id

        bid_name: '',  //页面标题
        title_num: '',  // 已完成单数
        title_price: '',  //金额
        title_date: '',   //最快完成时间


        bidBeing: {},//已发布
        bidDone: {},//已完成
        bidColl: {},//已报名
        bidBeingPage:1,
        bidDonePage:1,
        bidCollPage:1,
        userInfo:'',
        listData:[],
        downTime:'',//倒计时


        dailogShow:false,
        dailogText:'报名成功',
          
     }
  },
  async created(){
       this.bidtype = this.$route.query.bidtype
       let user_token = this.getUserToken()
       let re = await this.$axios.post('index/typeBidList',{
                user_token:user_token,
                bidtype:this.bidtype
       })
       if(re.code == 200){
                this.bid_name = re.data.bid_type //页面标题
                this.title_num = re.data.total.total_bid_done // 已完成单数
                this.title_price = re.data.total.total_bid_being //金额
                this.title_date = re.data.total.total_seller_num

               this.bidBeing = re.data.bidBeing.data
             
        }
       this.setCountDown();
      //console.log(this.bid_name)

  },
  mounted(){
            
  },
  components: {
    Phead,
    Pfoot,
    Pdailog
  },
  
  methods:{

       //报名
       async enrollBid(e){  
            let bidId = e.currentTarget.getAttribute('data-bidid')
            let id = e.currentTarget.getAttribute('data-id')
            let arr = this.bidBeing;
            //tab 20 招标中 70已完成，100 已收藏
            let re = await this.$axios.post('bid/enrollBid',{
                bid_id:bidId
            });
             if(re.code == 200){
                     this.dailogShow = true
                     this.dailogText = '报名成功'
                    
                  //改变报名按钮
                  arr[id].is_enlist = 1;
                  this.bidBeing = arr
                //未认证
                }else if(re.code == 201){
                  this.$router.push({path:'/register/status'})
                }else{
                     this.dailogShow = true
                     this.dailogText = re.msg
                    
                }
        },
    //标书详情
      async toDetail(e){
        let that =this;
        let bidid = e.currentTarget.getAttribute('data-bidid')
        //let  tabnum  =  e.currentTarget.dataset.tabnum;
        let user_token = this.getUserToken()
        let res = await this.$axios.post('bid/getGoWhere',{
            bid_id:bidid,
            user_token:user_token
          })
            if(res.code == 200){
                this.$router.push({path:'/bid/'+res.data.toWhere,query: {
                bid_id: bidid,
                redirect:'/bid/typebidlist',
                bidtype:this.bidtype
               }})
            }
            
       },
    //tab 切换
    async tabChange(e){
      let  tab = e.currentTarget.getAttribute('data-tab')
      this.tab = tab;
     //获取数据
      let user_token = this.getUserToken()
      let res = await this.$axios.post('index/tabBidList',{
        tab:tab,
        user_token:user_token,
        bidtype:this.bidtype

      })
      if(res.code == 200){
          if(this.tab == 20){
               this.bidBeing = res.data.data
               this.bidBeingPage = res.data.page
          }else if(tab ==70){
               this.bidDone = res.data.data
               this.bidDonePage = res.data.page
          }else if(tab ==100){
               this.bidColl = res.data.data
               this.bidCollPage = res.data.page
          }
       }
       
    },
     //倒计时
   setCountDown(){
    let that =this
    let time = 1000;
    let lts = this.bidBeing;
         this.downTime = setInterval(function(){
          let list = lts.map(function (v, i){
            if (v.time1 <= 0) {
              v.time1 = 0;
            }
           let formatTime = that.getFormat(v.time1);
            v.time1 -= time;
            v.countDown = `${formatTime.hh}时${formatTime.mm}分${formatTime.ss}秒`;
            return v;

          })
            that.bidBeing = list

       }, time)
    },

    async onPullingUp() {
            clearInterval(this.downTime);
            let that = this;
            let tab = this.tab;
            let page = 1;
            let bidBeingPage = this.bidBeingPage
            let bidDonePage = this.bidDonePage
            let bidCollPage = this.bidCollPage
            let bidtype = this.bidtype;

            if(tab ==20){
                page = bidBeingPage+1;
              }else if(tab == 70){
                page = bidDonePage+1;
              }else if(tab == 100){
                page = bidCollPage+1;
              }
              

              //获取数据
            let user_token = this.getUserToken()
            let re = await this.$axios.post('index/tabBidList',{
                tab:tab,
                user_token:user_token,
                page:page,
                bidtype:bidtype

              });

            if(re.code == 200){
                  if(tab == 20){
                         this.bidBeing = re.data.data
                         this.bidBeingPage = re.data.page
                         this.tab = 20
                  }else if(tab ==70){
                         this.bidDone = re.data.data
                         this.bidDonePage = re.data.page
                         this.tab = 70

                  }else if(tab ==100){
                         this.bidColl = re.data.data
                         this.bidCollPage = re.data.page
                         this.tab = 100

                  }
                  this.items = re.data.data
                  that.setCountDown();

              }
           
      },
    
    reload(){
        this.isRouterAlive = false
        this.$nextTick(function(){
            this.isRouterAlive =true
        })
    },

    //关闭弹窗
     closeDialog(){
          this.dailogShow=false;
     },

  }

}
</script>